<script setup>
import dictService from '@/api/modules/dict.js'
import ordersService from '@/api/modules/ordersService.js'
import { useI18n } from 'vue-i18n'

const orderStatusDict = ref([])
const { t } = useI18n()
const pageParams = ref({
  pageNum: 1,
  pageSize: 10,
  orderNumber: '',
  productName: '',
  orderStatus: '',
})
const orderList = ref([])

onMounted(() => {
  getOrderList()
  getOrderStatusDict()
})

function getOrderStatusDict() {
  dictService.get('ware_order_status').then((res) => {
    orderStatusDict.value = res.data.map(p => ({ label: t(getOrderStatusI18nKey(p.dictLabel)), value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
    orderStatusDict.value.unshift({ label: t('orderStatus.all'), value: '', elTagType: 'default', elTagClass: '' })
  })
}

function getOrderList() {
  ordersService.myList(pageParams.value).then((res) => {
    orderList.value = res.rows
  })
}

function getOrderStatusI18nKey(status) {
  switch (status) {
    case '预售':
      return 'orderStatus.preSale'
    case '进行中':
      return 'orderStatus.inProgress'
    case '已完成':
      return 'orderStatus.completed'
    case '':
      return 'orderStatus.all'
  }
}
</script>

<template>
  <div class="space-y-4">
    <n-card class="!w-full" size="small" content-class="!pb-0 !pt-5">
      <div class="grid grid-cols-2 gap-3">
        <n-form-item :label="t('user.orderNumber')" label-placement="left">
          <n-input
            v-model:value.lazy="pageParams.orderNumber"
            :placeholder="t('please.enter', {
              name: t('user.orderNumber'),
            })"
            clearable
            class="!w-[88%]"
            @input="getOrderList"
          />
        </n-form-item>
        <n-form-item :label="t('goods')" label-placement="left">
          <n-input
            v-model:value.lazy="pageParams.productName"
            :placeholder="t('please.enter', {
              name: t('goods'),
            })"
            clearable
            class="!w-[88%]"
            @input="getOrderList"
          />
        </n-form-item>
      </div>
    </n-card>
    <n-card class="!w-full">
      <div class="w-42%">
        <n-tabs v-model:value="pageParams.orderStatus" type="segment" animated size="large" @update:value="getOrderList">
          >
          <n-tab-pane v-for="(item, index) in orderStatusDict" :key="index" :name="item.value" :tab="item.label" />
        </n-tabs>
      </div>
      <div v-if="orderList.length > 0" class="relative mt-3 overflow-x-auto">
        <div class="flex bg-gray-50 text-gray-700 uppercase dark:bg-gray-700 dark:text-gray-400">
          <div class="col-span-2 w-[560px] px-6 py-3">
            {{ t('goods') }}
          </div>
          <div class="flex-1 px-6 py-3">
            {{ t('orderStatus.status') }}
          </div>
          <div class="w-[120px] px-6 py-3" />
        </div>
        <div class="order-item-list mt-2 space-y-4">
          <div
            v-for="(item, index) in orderList"
            :key="index"
            class="order-item-list-item flex-col cursor-pointer border border-gray-200 rounded-md dark:border-gray-700"
          >
            <div class="order-item-list__header flex justify-between border-b border-b-2 border-gray-200 dark:border-gray-700 border-dashed px-3 pb-2 pt-3">
              <div>
                {{ item.createTime }}
              </div>
              <div>
                {{ item.orderNumber }}
              </div>
            </div>
            <div class="mt-3 flex gap-4 p-2">
              <div class="w-[550px] flex space-x-15">
                <div class="order-img">
                  <n-image
                    :width="150"
                    :height="150"
                    src="https://www.antdv.com/#error"
                    fallback=""
                  />
                </div>
                <div class="order-info">
                  <div class="order-title line-clamp-2 text-lg font-bold">
                    {{ item.productName }}
                  </div>
                  <div class="mt-5 flex flex-wrap gap-2">
                    <n-button strong secondary round type="info" size="small">
                      {{ t('shopList.partNumber') }}：{{ item.productNumber }}
                    </n-button>
                    <n-button strong secondary round type="info" size="small">
                      {{ t('shopList.specs') }}：{{ item.productSpecification }}
                    </n-button>
                    <n-button strong secondary round type="info" size="small">
                      {{ t('shopList.weight') }}：{{ item.productWeight }}KG
                    </n-button>
                  </div>
                  <div class="order-price mt-3">
                    <div class="text-2xl text-red-500 font-bold">
                      <span class="mr-1 font-bold">¥</span>
                      {{ item.totalPrice }}
                    </div>
                  </div>
                  <div class="order-quantity mt-3 text-[16px]">
                    {{ t('quantity') }}：{{ item.totalQuantity }}
                  </div>
                </div>
              </div>
              <n-text type="info" class="order-status flex-1 px-6 text-[16px]  font-bold">
                {{ t(getOrderStatusI18nKey(item.orderStatus)) }}
              </n-text>
              <div class="order-action w-[120px]">
                <!--                <a-button danger> -->
                <!--                  <template #icon> -->
                <!--                    <DeleteOutlined /> -->
                <!--                  </template> -->
                <!--                </a-button> -->
                <n-button tertiary type="error">
                  Delete
                </n-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <n-empty v-else />
    </n-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
